<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<link rel="stylesheet" href="../static/layui/css/layui.css">
		<link rel="stylesheet" href="../static/xznstatic/css/common.css"/>
		<link rel="stylesheet" href="../static/xznstatic/css/style.css"/>
		<link rel="stylesheet" href="../static/css/bootstrap.css">
		<link href="../static/css/bootstrap.min.css" rel="stylesheet">
		<link href="../static/css/materialdesignicons.min.css" rel="stylesheet">
		<link href="../static/css/style.min.css" rel="stylesheet">

		<link rel="stylesheet" type="text/css" href="../static/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="../static/css/style1.css" />
	</head>
	<style type="text/css">
	/* 	html, body {
			height: 100%;
		} */
		
		#iframe {
			width: 100%;
			margin-top: 50px;
			padding-top: 94px;
		}
		#header {
			height: auto;
			background: #fff;
			border-bottom: 0;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}

		#header .nav-top {
			display: flex;
			align-items: center;
			padding: 0 20px;
			font-size: 16px;
			color: #2a8a15;
			box-sizing: border-box;
			height: 50px;
			background-color: rgba(255, 120, 0, 1);
			box-shadow: 0 0 20px #e88a64;
			justify-content: center;
			position: relative;
		}

		#header .nav-top-title {
			line-height: 40px;
			font-size: 20px;
			color: rgba(255, 255, 255, 1);
			padding: 0 10px;
			margin: 0 10px;
			border-radius: 0px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);

		}
		#header .nav-top-tel {
			line-height: 40px;
			font-size: 16px;
			color: #333;
			padding: 0 10px;
			margin: 0;
			border-radius: 6px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);

		}

		#header .navs {
			display: flex;
			padding: 0 20px;
			align-items: center;
			box-sizing: border-box;
			height: 94px;
			background-color: rgba(255, 248, 239, 1);
			box-shadow: 0 1px 6px rgba(0,0,0,0);
			justify-content: center;
		}
		#header .navs .title {
			width: auto;
			line-height: 40px;
			font-size: 16px;
			color: #333;
			padding: 0 10px;
			margin: 0 5px;
			border-radius: 6px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			box-shadow: 0 0 6px rgba(0,0,0,0);
		}
		#header .navs li {
			display: inline-block;
			width: auto;
			line-height: 34px;
			padding: 0 10px;
			margin: 0 5px;
			color: #333;
			font-size: 20px;
			border-radius: 6px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(0,0,0,.3);
			background-color: rgba(255, 248, 239, 1);
			box-shadow: 0 0;
      text-align: center;
		}
		#header .navs li a{
			color: inherit;
		}
		#header .navs li.current a{
			color: inherit;
		}
		#header .navs li a:hover{
			color: inherit;
		}
		#header .navs li.current {
			color: rgba(226, 81, 17, 1);
			font-size: 20px;
			border-radius: 0px;
			border-width: 0;
			border-style: solid;
			border-color: rgba(255, 255, 255, 1);
			background-color: rgba(255, 248, 239, 1);
			box-shadow: 0 2px 0px #e25111;
		}


	</style>
	<body>

		<!-- start 顶部导航栏 -->
		<div id="header">
			<div v-if='true' class="nav-top" >
			  
			  <div v-if="true" class="nav-top-title">智能车险投保系统</div>
			  <div class="nav-top-tel"></div>
		</div>
		    <div class="navs">
		    	<!-- <div class="logo" style="font-size: 20px;top: 32px;color: #fff;font-weight: bold;margin-left: -200px;width: 240px;" v-text="projectName"></div> -->
				<div class="title" v-if="false" v-text="projectName"></div>
				<div class="list">
					<ul>
						<li class='current'><a href="#slide-main"><i v-if="false" class="layui-icon layui-icon-home"></i>首页</a></li>
						<li ><a th:href="@{echarts}" target="jj" ><i v-if="false" class="layui-icon layui-icon-list"></i>历史记录</a></li>
						<li ><a th:href="@{look}" target="jj"><i v-if="false" class="layui-icon layui-icon-cart"></i>汽车保险</a></li>
						<li ><a th:href="@{fuwudating}"  ><i v-if="false" class="layui-icon layui-icon-util"></i>服务大厅</a></li>
						<li ><a th:href="@{personal}" target="jj" ><i v-if="false" class="layui-icon layui-icon-username"></i>个人中心</a>
						</li>
					</ul>
				</div>
		    </div>
	<div class="container">
		<section class="cn-container">
<!--			<a href="#slide-main">展示保险</a>-->
			<div class="cn-slide" id="slide-main">
				<h2>保险列表</h2>
				<nav>
					<a href="#slide-1">盗抢险</a>							
					<a href="#slide-2">交强险</a>						
					<a href="#slide-3">第三责任险</a>
					<a href="#slide-4">车损险</a>

				</nav>
			</div>
			
			<!-- Slide 1 and Sub-slides -->
			<div class="cn-slide cn-slide-sub" id="slide-1">
				<h2>盗抢险</h2>
				<a href="#slide-main" class="cn-back">返回</a>
				<nav>
					<a href="#slide-1-1">不计赔付：是</a>
					<a href="#slide-1-2">费率浮动：  -23.05</a>
					<a href="#slide-1-3">保险金额：321459.20</a>
					<a href="#slide-1-4">保险费：1304.42</a>
				</nav>
			</div>


<!--			&lt;!&ndash; Slide 2 and Sub-slides &ndash;&gt;-->
			<div class="cn-slide cn-slide-sub" id="slide-2">
				<h2>交强险</h2>
				<a href="#slide-main" class="cn-back">Back</a>
				<nav>
					<a href="#slide-2-1">不计赔付：否</a>
					<a href="#slide-2-2">费率浮动：  -23.05</a>
					<a href="#slide-2-3">保险金额：122000.00</a>
					<a href="#slide-2-4">保险费：120.00</a>
				</nav>
			</div>
<!--			&lt;!&ndash; Slide 3 and Sub-slides &ndash;&gt;-->
			<div class="cn-slide cn-slide-sub" id="slide-3">
				<h2>第三责任险</h2>
				<a href="#slide-main" class="cn-back">Back</a>
				<nav>
					<a href="#slide-3-1">不计赔付：否</a>
					<a href="#slide-3-2">费率浮动：  -23.05</a>
					<a href="#slide-3-3">保险金额：500000.00</a>
					<a href="#slide-3-4">保险费：1189.65</a>
				</nav>
			</div>

			<div class="cn-slide cn-slide-sub" id="slide-4">
				<h2>车损险</h2>
				<a href="#slide-main" class="cn-back">Back</a>
				<nav>
					<a href="#slide-4-1">不计赔付：否</a>
					<a href="#slide-4-2">费率浮动：  -23.05</a>
					<a href="#slide-4-3">保险金额：346400.00</a>
					<a href="#slide-4-4">保险费：34646.72</a>
				</nav>
			</div>

		</section>
		</div>
		</div>
	</body>
</html>
